<template>
    <view class="page">
        <back :title="'提现'" :isBack="true"></back>
        <view class="cash_box">
            <view class="top_txt">提现金额(元)</view>
            <view class="tx_k_box">
                <view class="zifujie_money_box">¥</view>
                <input class="inp_box" type="digit" inputmode="decimal" v-model="txNum">
                <view class="tx_money_box" @click="Fullwithdrawal">全部提现</view>
            </view>
            <view class="shangchuan_box">
                <image v-if="image_url" :src="image_url" mode="scaleToFill" />
                <u-icon v-else @click="upLoadimage" name="plus" color="rgba(199, 199, 199, 1)" size="80"></u-icon>
            </view>
            <view class="qsctxt_box">请上传您的收款码</view>
            <!-- <view class="handling_box">
                手续费：0.00%
            </view> -->
            <view class="enter_tx_box" @click="$noMultipleClicks(submit)">
                确认提现
            </view>
            <!-- <view class="account_box">
                <text style=" font-weight: 700;">收款账户：</text>
                <image src="https://rubbish.lwjcg.com/static/index/wxlogo.png" mode="scaleToFill" />
                微信零钱
            </view> -->
        </view>

        <!-- 提现记录 -->
        <!-- <scroll-view scroll-y class="record_big_box" v-if="recordList.length > 0">
            <view class="txjl_box">提现记录</view>
            <view class="zs_js_box" v-for="(item, index) in recordList">
                <view class="left_zs_js_box">
                    <view class="left_zs_js_top_box">提现到微信零钱</view>
                    <view class="left_zs_js_bot_box">2024.04.01 12:25</view>
                </view>
                <view class="right_zs_js_box">
                    <view class="left_zs_js_top_box">-50</view>
                    <view class="left_zs_js_bot_box">
                        已完成
                    </view>
                </view>
            </view>
        </scroll-view> -->
        <!-- <view class="konmg_box">暂无提现记录</view> -->
    </view>
</template>
<script>
import back from "@/components/goback/goback"
export default {
    components: {
        back
    },
    data() {
        return {
            noClick: true,//防连点
            recordList: [],//提现列表
            txNum: '',//提现金额
            filepath: '',//接口图片链接
            file: '',
            image_url: '',//展示图片链接
            yue: ''
        }
    },
    onLoad(options) {
        this.yue = options.yue
        console.log(this.yue)
    },
    onShow() {
    },
    methods: {
        Fullwithdrawal() {
            this.txNum = this.yue
        },
        upLoadimage() {
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], //从相册选择
                success: (res) => {
                    console.log(res);
                    this.file = res.tempFilePaths[0]

                    var uploadurl = "https://build.lwjcg.com/api/withdraw/upload?token=" + uni.getStorageSync("USERINFO")
                    uni.uploadFile({
                        url: uploadurl,
                        filePath: this.file,
                        name: 'img_url',
                        formData: {
                            'openid': uni.getStorageSync('openId')
                        },
                        success: (res) => {
                            console.log(res)
                            let group = JSON.parse(res.data)
                            console.log(group)
                            uni.showToast({
                                title: "上传成功",
                                icon: "success"
                            })
                            this.image_url = group.data.full_path
                            this.filepath = group.data.path
                        }
                    });
                }
            });


        },
        submit() {
            console.log(this.txNum, this.filepath)
            if (this.txNum == '') {
                uni.showToast({
                    title: "请输入提现金额",
                    icon: "none"
                })
            } else if (this.filepath == '') {
                uni.showToast({
                    title: "请上传收款码",
                    icon: "none"
                })
            } else if (this.txNum > (this.yue * 1)) {
                uni.showToast({
                    title: "佣金余额不足",
                    icon: "none"
                })
            } else {
                let data = {
                    withdraw_money: this.txNum,
                    img_url: this.filepath
                }
                this.$Request.post(this.$api.word.withdrawAdd, data).then(res => {
                    if (res.code == 200) {
                        uni.showToast({
                            title: "申请成功",
                            icon: "none"
                        })
                        setTimeout(() => {
                            uni.navigateBack({ delta: 1 })
                        }, 1000)
                    }

                })
            }

        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .cash_box {
        width: 704rpx;
        height: 750rpx;
        border-radius: 28rpx;
        background: rgba(255, 255, 255, 1);
        margin: auto;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding-top: 28rpx;
        padding-left: 24rpx;
        padding-right: 24rpx;
        margin-bottom: 20rpx;

        .top_txt {
            height: 40rpx;
            font-size: 28rpx;
            font-weight: 600;
            line-height: 40rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 34rpx;
        }

        .tx_k_box {
            width: 646rpx;
            height: 92rpx;
            border-radius: 16rpx;
            background: rgba(240, 240, 240, 1);
            margin: auto;
            box-sizing: border-box;
            padding: 0 32rpx 0 22rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 50rpx;

            .zifujie_money_box {
                height: 68rpx;
                font-size: 48rpx;
                font-weight: 500;
                line-height: 68rpx;
                color: rgba(0, 0, 0, 1);

            }

            .inp_box {
                width: 420rpx;
                height: 72rpx;
                line-height: 72rpx;
                font-size: 48rpx;
                font-weight: 600;
                color: rgba(0, 0, 0, 1);
            }

            .tx_money_box {
                width: 96rpx;
                height: 34rpx;
                opacity: 1;
                font-size: 24rpx;
                font-weight: 400;
                line-height: 34rpx;
                color: rgba(26, 194, 121, 1);

            }


        }

        .shangchuan_box {
            width: 232.2rpx;
            height: 255.42rpx;
            opacity: 1;
            border-radius: 20.9rpx;
            background: rgba(240, 240, 240, 1);
            border: 2.32rpx solid rgba(26, 194, 121, 1);
            margin-bottom: 18rpx;
            text-align: center;
            line-height: 300rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 20.9rpx;
            }

        }

        .qsctxt_box {
            width: 100%;
            height: 46rpx;
            line-height: 46rpx;
            font-size: 30.19rpx;
            font-weight: 400;
            line-height: 46rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 62rpx;
        }

        // .handling_box {
        //     width: 646rpx;
        //     height: 34rpx;
        //     font-size: 24rpx;
        //     font-weight: 400;
        //     line-height: 34rpx;
        //     color: rgba(128, 128, 128, 1);
        //     box-sizing: border-box;
        //     padding-left: 16rpx;
        //     margin-bottom: 72rpx;
        // }

        .enter_tx_box {
            width: 652rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background: rgba(26, 194, 121, 1);
            margin: auto;
            text-align: center;
            line-height: 100rpx;
            font-size: 36rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            margin-bottom: 48rpx;

        }

        // .account_box {
        //     width: 100%;
        //     height: 50rpx;
        //     font-size: 28rpx;
        //     font-weight: 500;
        //     line-height: 50rpx;
        //     color: rgba(0, 0, 0, 1);
        //     display: flex;
        //     justify-content: flex-start;
        //     align-items: center;

        //     image {
        //         width: 44rpx;
        //         height: 44rpx;
        //         border-radius: 50%;
        //         margin: 0 10rpx;

        //     }

        // }
    }

    // .record_big_box {
    //     width: 704rpx;
    //     height: calc(100vh - 812rpx);
    //     border-radius: 28rpx;
    //     margin: auto;
    //     background: rgba(255, 255, 255, 1);
    //     box-sizing: border-box;
    //     padding-top: 28rpx;

    //     .txjl_box {
    //         width: 100%;
    //         box-sizing: border-box;
    //         padding-left: 28rpx;
    //         height: 40rpx;
    //         opacity: 1;
    //         font-size: 28rpx;
    //         line-height: 40rpx;
    //         color: rgba(0, 0, 0, 1);
    //         margin-bottom: 4rpx;

    //     }

    //     .zs_js_box {
    //         width: 636rpx;
    //         height: 144rpx;
    //         display: flex;
    //         margin: auto;
    //         justify-content: space-between;
    //         border-bottom: 2rpx solid rgba(245, 245, 245, 1);

    //         .left_zs_js_box {
    //             height: 100%;
    //             width: 70%;
    //             box-sizing: border-box;
    //             padding-top: 32rpx;

    //             .left_zs_js_top_box {
    //                 width: 100%;
    //                 height: 46rpx;
    //                 font-size: 32rpx;
    //                 font-weight: 600;
    //                 line-height: 46rpx;
    //                 color: rgba(0, 0, 0, 1);
    //                 margin-bottom: 10rpx;
    //             }

    //             .left_zs_js_bot_box {
    //                 width: 100%;
    //                 height: 34rpx;
    //                 opacity: 1;
    //                 font-size: 24rpx;
    //                 line-height: 34rpx;
    //                 color: rgba(128, 128, 128, 1);

    //             }
    //         }

    //         .right_zs_js_box {
    //             height: 100%;
    //             width: 28%;
    //             box-sizing: border-box;
    //             padding-top: 32rpx;

    //             .left_zs_js_top_box {
    //                 width: 100%;
    //                 height: 46rpx;
    //                 font-size: 32rpx;
    //                 font-weight: 600;
    //                 line-height: 46rpx;
    //                 color: rgba(0, 0, 0, 1);
    //                 margin-bottom: 10rpx;
    //                 text-align: right;
    //             }

    //             .left_zs_js_bot_box {
    //                 width: 100%;
    //                 height: 34rpx;
    //                 opacity: 1;
    //                 font-size: 24rpx;
    //                 line-height: 34rpx;
    //                 color: rgba(128, 128, 128, 1);
    //                 text-align: right;

    //             }
    //         }
    //     }

    // }

    // .konmg_box {
    //     width: 100%;
    //     height: 34rpx;
    //     /** 文本1 */
    //     font-size: 24rpx;
    //     font-weight: 400;
    //     line-height: 34rpx;
    //     color: rgba(128, 128, 128, 1);
    //     text-align: center;
    //     margin-top: 64rpx;

    // }

}
</style>